<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			svg {
				border: 5px solid black;
			}

		</style>
	</head>
	<body>

		<!-- 
			SVG, 可缩放矢量图
		 -->
		<!-- 
			引入方式
		-->
		<!-- <object data="image.svg" type="image/svg+xml" /> -->

		<!-- <iframe src="image.svg" width="300px" height="350px"></iframe> -->
		
		<!-- 
			这里定义的画布尺寸是200*200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽*100高的区域。这个100*100的区域，会放到200*200的画布上显示。于是就形成了放大两倍的效果。
		 -->
		<svg width="200" height="200" viewBox="0 0 100 100">
			<rect width="50" height="50"  fill="red"></rect>
		</svg>

	</body>
</html>